<template>
  <view>
    <view
      @click="goToIm(item.userId)"
      class="user-view"
      v-for="(item, index) in userList"
      :key="index"
    >
      <img class="user-image" :src="item.userimg" alt="" srcset="" />
      <view class="user-info">
        <view class="name">{{ item.name }}</view>
        <view class="desc">{{ item.desc }}</view>
      </view>
      <van-tag round type="success" size="medium" class="user-tag"
        >在线</van-tag
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: "正义天使 凯尔",
          desc: "如果不是为了飞翔，我要这翅膀有何用",
          userimg: "https://img01.yzcdn.cn/vant/cat.jpeg",
          userId: "user002",
        }        
      ],
    };
  },
  methods: {
    goToIm(userId) {
      // 跳转到聊天界面
      uni.navigateTo({
        url: "/pages/consulting/index?userId=" + userId,
      });
    },
  },
};
</script>

<style scoped>
.user-view {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 15px;
  border-bottom: 1px solid #dbdbdb;
}
.user-image {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.user-info > .name {
  color: #323233;
}
.user-info > .desc {
  font-size: 14px;
  margin-top: 3px;
  color: gray;
}
.user-tag {
  position: absolute;
  right: 15px;
}
</style>
